<template>
  <!--  地图容器 -->
  <div id="map" style="height: 100vh; width: 100%">

  </div>
</template>
<script setup>
import mapboxgl  from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import {onMounted} from "vue";
let map;
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id,
    style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
    center: [117, 33], // 地图初始中心【经纬度】
    zoom: 2.4, // 地图初始缩放界别
    projection: 'globe', // 地图投影 为3D地球
    pitch: 0, // 相对于地面3D视角的角度
    bearing: 0, // 东西南北 方向 正北方为0
    antialias: false, // 抗锯齿，通过false关闭提升性能
    essential: true,
    renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
    skipOnboarding: true,//可选择不等待瓦片加载
  })

  // Mapbox GL JS中的图层是异步的，通过使用事件绑定在合适的时间更改地图
  map.on('load', () => {
    initControls();
    initSourceAndLayers();
  })


})

const initSourceAndLayers = () => {
  /*
  * 在3D地球和地形渲染期间，GL JS将多个图层一起批处理获得最佳性能
  * 此过程会导致曾的重新排列，
  * 首先渲染覆盖在地球和地形上的图层
  * eg: fill、line、background、hiddeshade和raster
  * 这些图层将渲染在符号下方
  * slot插槽相关内容
  * - bottom： 多边形上方(土地、水等资源类型
  * - middle: 线路上方（道路等）和3D建筑物后面
  * - top: 在POI标签上方、地点和交通标签后面，top这个属性和symbol层一起使用
  * */
  map.addSource('urban-areas', {
    'type': 'geojson',
    'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
  })
  map.addLayer({
    'source': 'urban-areas',
    'id': 'urban-areas-fill',
    'type': 'fill',
    'slot': 'bottom',
    'layout': {},
    'paint': {
      'fill-color': '#f990c6',
      'fill-opacity': 0.4
    }
  })
}

const initControls = () => {
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
  map.addControl(new mapboxgl.GeolocateControl())
  map.addControl(new mapboxgl.FullscreenControl())
  map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}))
  map.addControl(new mapboxgl.ScaleControl())
  initDrawBox();
}
const initDrawBox = () => {
  let Draw = new MapboxDraw({
    controls: {
      point: true,
      line_string: true,
      polygon: true,
      trash: true,
    },
    displayControlsDefault: false,
  })
  map.addControl(Draw, 'top-left')
}
</script>


<style scoped lang="scss">

</style>
